<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="标题">
        <el-input v-model="techObject.industryTitle"/>
      </el-form-item>
      <el-form-item label="编者">
        <el-input v-model="techObject.industryWriter"/>
      </el-form-item>
      <el-form-item label="摘要">
        <el-input v-model="techObject.industryAbstract" :rows="5" type="textarea"/>
      </el-form-item>
      <el-form-item label="内容">
        <tinymce :height="300" v-model="techObject.industryContent"/>
      </el-form-item>
      <el-form-item label="来源">
        <el-input v-model="techObject.industrySource"/>
      </el-form-item>

      <el-form-item label="类别">
        <el-select
          v-model="techObject.industryType"
          placeholder="选择类别" 
          size="medium">
          <el-option
            v-for="audit in newTypeList"
            :key="audit.id"
            :label="audit.name"
            :value="audit.id"/>
        </el-select>
      </el-form-item>
      <!-- :action="BASE_API+'/eduoss/fileoss'" -->
      <el-form-item label="上传附件">
          <el-upload
                :before-upload="beforeUpload"
                :on-success="handleVodUploadSuccess"
                :on-remove="handleVodRemove"
                :before-remove="beforeVodRemove"
                :on-exceed="handleUploadExceed"
                :file-list="fileList"
                :action="BASE_API+'/servicetech/industry-research/upload'"
                :limit="1"
                accept=".doc,.docx,.xls,.xlsx,.ppt,.pdf"
                class="upload-demo">
              <el-button size="small" type="primary">上传附件</el-button>
              <el-tooltip placement="right-end">
                <div slot="content">只支持上传excel/word/ppt/pdf等</div>
                <i class="el-icon-question"/>
              </el-tooltip>
            </el-upload>
          </el-form-item>

      <el-form-item>
        <el-button :disabled="isAdd" type="primary" @click="save">保存</el-button>
        <el-button :disabled="isEdit" type="success" @click="update">更新</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import techObjectApi from '@/api/tech/industry'
import Tinymce from '@/components/Tinymce' // 引入富文本组件

export default {
  // 声明组件
  components: { Tinymce },
  data() {
    return {
      newTypeList: [
        {
          id:0,
          name: '科技'
        },
        {
          id:1,
          name: '交通'
        },
        {
          id:2,
          name: '健康'
        },
        {
          id:3,
          name: '农业'
        },
         {
          id:4,
          name: '旅游'
        }
      ],
      isEdit: true, // 是审核时所有输入框处于禁用状态,默认是true，即禁用
      isAdd: true, // 保存按钮是否禁用,
      techObject: {
        industryTitle: '',
        industryWriter: '',
        industryAbstract: '',
        industryContent: '',
        industrySource: '',
        industryType: 0,
        industryAttachment: '' // 上传文件路径
      },
      fileList: [], // 上传文件列表
      BASE_API: process.env.BASE_API, // 接口API地址
    }
  },
  created() { // 页面渲染之前执行
    this.init()
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        if(id == ":id"){
          //console.log("========新增==========" + id)
          this.isAdd = false
           // 清空表单
          this.techObject = {
            industryTitle: '',
            industryWriter: '',
            industryAbstract: '',
            industryContent: '',
            industrySource: '',
            industryType: 0,
            industryAttachment: '' // 上传文件路径
          }
        }else{
          //console.log("========更新==========" + id)
          this.isEdit = false
          this.getInfo(id)
        }
      }else{
         //console.log("========无参数==========" + this.$route.params)
         this.isAdd = false
         this.isEdit = true
           // 清空表单
          this.techObject = {
            industryTitle: '',
            industryWriter: '',
            industryAbstract: '',
            industryContent: '',
            industrySource: '',
            industryType: 0,
            industryAttachment: '' // 上传文件路径
          }
      }
    },
    getInfo(id) {
      techObjectApi.getById(id)
        .then(response => {
          this.techObject = response.data.item
          // 显示文件列表
          //console.log("==this.techObject.industryAttachment==" + this.techObject.industryAttachment)
          if(this.techObject.industryAttachment != null && this.techObject.industryAttachment != ''){
            const fileName = this.techObject.industryAttachment.substring(this.techObject.industryAttachment.lastIndexOf("/")+1)
            this.fileList=[{'name': fileName}]
          }
        })
    },
    // 更新
    update() {
      if(!this.techObject.industryTitle){
          this.$message({
            type: 'warning',
            message: "标题不能为空"
          })
          return
      }
      if(!this.techObject.industryWriter){
          this.$message({
            type: 'warning',
            message: "作者不能为空"
          })
          return
      }
      if(!this.techObject.industryAbstract){
          this.$message({
            type: 'warning',
            message: "摘要不能为空"
          })
          return
      }
      if(!this.techObject.industryContent){
          this.$message({
            type: 'warning',
            message: "内容不能为空"
          })
          return
      }
      if(!this.techObject.industrySource){
          this.$message({
            type: 'warning',
            message: "来源不能为空"
          })
          return
      }
      
      techObjectApi.updateOne(this.techObject)
        .then(response => {
          // 提示信息
          this.$message({
            type: 'success',
            message: response.message
          })
          // 回到列表页面 路由跳转
          this.$router.push({ path: '/techIndustry/industry/list' })
        })
    },
    // 保存
    save() {
      if(!this.techObject.industryTitle){
          this.$message({
            type: 'warning',
            message: "标题不能为空"
          })
          return
      }
      if(!this.techObject.industryWriter){
          this.$message({
            type: 'warning',
            message: "作者不能为空"
          })
          return
      }
      if(!this.techObject.industryAbstract){
          this.$message({
            type: 'warning',
            message: "摘要不能为空"
          })
          return
      }
      if(!this.techObject.industryContent){
          this.$message({
            type: 'warning',
            message: "内容不能为空"
          })
          return
      }
      if(!this.techObject.industrySource){
          this.$message({
            type: 'warning',
            message: "来源不能为空"
          })
          return
      }
      techObjectApi.add(this.techObject)
        .then(response => {
          // 提示信息
          this.$message({
            type: 'success',
            message: response.message
          })
          // 回到列表页面 路由跳转
          this.$router.push({ path: '/techIndustry/industry/list' })
        })
    },
    // 上传-成功回调
    handleVodUploadSuccess(response, file, fileList){
       // 获取上传成功路径 
        this.techObject.industryAttachment = response.data.path
    },
    
    // 视图上传多于一个
    handleUploadExceed(files, fileList) {
      this.$message.warning('想要重新上传，请先删除已上传的文件')
    },
    // 删除
    beforeVodRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 上传之前调用的方法
    beforeUpload(file) {
      const fileExtension = file.name.substring(file.name.lastIndexOf('.')+1)
      if (fileExtension === "doc" || fileExtension === "docx" || 
      fileExtension === "xls" || fileExtension === "xlsx" || fileExtension === "ppt" 
      || fileExtension === "pdf") {
        const isLt5M = file.size / 1024 / 1024 < 50
        if (!isLt5M) {
          this.$message.error('上传文件大小不能超过 50MB!')
          return false
        }
        return true
      }else{
         this.$message.error('上传文件只支持上传excel/word/ppt/pdf!')
         return false
      }
      return false
    },
    // 删除视频前的提示对话框
    beforeVodRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 删除视频接口方法
    handleVodRemove(file, fileList) {
      // 提示信息
      this.$message({
        type: 'success',
        message: '删除成功~'
      })
    },
  }
}
</script>
<style scoped>
  .tinymce-container {
    line-height: 29px;
  }
  .videoList{
    padding-left: 50px;
  }
  .videoList p{
    float: left;
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #DDD;
  }
</style>
